<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat, toYuan, timeStamp, timeFormat_2, getNowDay } from '@/hooks/util'
import * as xyApi from '@/api/xy'
import { message } from 'ant-design-vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import OrderDetail from './components/OrderDetail.vue'
import PullXyRobot from '@/components/PullRobot/PullXyRobot.vue'
import RefundDetail from './components/RefundDetail.vue'
import SearchDrawer from '@/components/search-drawer/Index.vue'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import moment from 'moment'

const searchDrawerRef = ref()

const route = useRoute()
const orderDetailRef = ref()
const RefundDetailRef = ref()

let searchFlag = ref<boolean>(false)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  robotId?: string
  buyerNick?: string | undefined
  remark?: string | undefined
  orderStatus?: string | number
  startTime?: string | number
  endTime?: string | number
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  {
    title: '宝贝信息',
    key: 'productTitle',
    width: 400,
  },
  {
    title: '买家信息',
    key: 'fansNickName',
    width: 400,
  },
  {
    title: '销售信息',
    key: 'productPrice',
    width: 300,
  },
  {
    title: '订单信息',
    key: 'orderStatus',
    width: 400,
  },
  {
    title: '时间信息',
    key: 'createTime',
    width: 300,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]

const productSkuCop = computed(sku => {
  return (sku: any) => {
    if (sku) {
      // 在JavaScript中，我们通常不检查是否为"not empty"，而是直接检查是否存在

      if (sku.includes('|')) {
        // 从第一个 "|" 字符之后的部分开始截取字符串
        sku = sku.substring(sku.indexOf('|') + 1)
        if (sku.includes(';')) {
          // 将所有的 ";" 替换为换行符 "\n"
          sku = sku.replace(/;/g, '\n')
        }
      }
      return sku
    } else {
      return '无'
    }
  }
})
// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const selectRobot = (id: string) => {
  searchParams.value.robotId = id
  // getList()
  search()
}

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await xyApi.fishOrderList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

import type { Dayjs } from 'dayjs'
type RangeValue = [Dayjs, Dayjs] | [string, string] | undefined
let startTime = ref<string>()
let endTime = ref<string>()
const changeTime = (e: RangeValue | [string, string], dataString: [string, string]) => {
  console.log(dataString)
  startTime.value = dataString[0]
  endTime.value = dataString[1]
}

// 将选择范围控制在7天
import type { Moment } from 'moment'
const dates = ref<Moment[]>([])
const disabledDate = (current: Moment) => {
  if (!dates.value || dates.value.length === 0) {
    return false
  }
  const diffDate = current.diff(dates.value[0], 'days')
  return Math.abs(diffDate) > 30
}
const onCalendarChange = (val: Moment[]) => {
  dates.value = val
}

// 查询
const formRef = ref()
import type { SelectProps } from 'ant-design-vue'
const orderStatusList = ref<SelectProps['options']>([
  {
    label: '未知状态',
    value: 0,
  },
  {
    label: '已创建',
    value: 1,
  },
  {
    label: '已付款',
    value: 2,
  },
  {
    label: '已发货',
    value: 3,
  },
  {
    label: '交易成功',
    value: 4,
  },
  {
    label: '已退款',
    value: 5,
  },
  {
    label: '交易关闭',
    value: 6,
  },
  // {
  //   label: '退款中',
  //   value: 7,
  // },
])

// optionA
const optionAList = ref<SelectProps['options']>([
  {
    label: '订单号',
    value: 'orderNumber',
  },
  {
    label: '宝贝标题',
    value: 'productTitle',
  },
  {
    label: '宝贝id',
    value: 'productId',
  },
])
let conditionA = ref<string>('')
const selectA = (value: string) => {
  conditionA.value = value
  // console.log('conditionA=', conditionA.value)
}

// optionB
const optionBList = ref<SelectProps['options']>([
  {
    label: '买家昵称',
    value: 'fansNickName',
  },
  {
    label: '买家会员名',
    value: 'fansMemberName',
  },
  {
    label: '买家淘宝id',
    value: 'fansFishId',
  },
  {
    label: '买家系统id',
    value: 'fansId',
  },
])
let conditionB = ref<string>('')
const selectB = (value: string) => {
  conditionB.value = value
  // console.log('conditionB=', conditionB.value)
}

// optionC
const optionCList = ref<SelectProps['options']>([
  {
    label: '创建时间',
    value: 'createTimeBegin',
  },
  {
    label: '付款时间',
    value: 'payTimeBegin',
  },
  {
    label: '发货时间',
    value: 'shipTimeBegin',
  },
  {
    label: '完结时间',
    value: 'endTimeBegin',
  },
])
let conditionC = ref<string>('createTimeBegin')
const selectC = (value: string) => {
  for (let key in searchParams.value) {
    if (key.indexOf('Time') != -1)
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  conditionC.value = value
  // console.log('conditionC=', conditionC.value)
}

interface FormState {
  buyerNick?: string | undefined
  remark?: string | undefined
  orderStatus?: string | number
  time?: [string, string]
  [propName: string]: any
}
const formState = reactive<FormState>({
  time: [dayjs().subtract(29, 'days').startOf('day'), dayjs().endOf('day')],
  optionC: 'createTimeBegin',
})

// onMounted(() => {
//   search()
// })
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value[conditionA.value] = formState.contentA
    searchParams.value[conditionB.value] = formState.contentB
    searchParams.value[conditionC.value] = formState.contentC

    if (
      formState.time &&
      formState.time!.length > 0 &&
      formState.time![0] != null &&
      formState.time![1] != null
    ) {
      if (conditionC.value == 'createTimeBegin') {
        // searchParams.value.createTimeBegin = timeStamp(`${startTime.value} 00:00:00`)
        // searchParams.value.createTimeCease = timeStamp(`${endTime.value} 23:59:59`)
        searchParams.value.createTimeBegin = new Date(
          moment(formState.time[0].$d).format('YYYY-MM-DD 00:00:00'),
        ).getTime()
        searchParams.value.createTimeCease = new Date(
          moment(formState.time[1].$d).format('YYYY-MM-DD 23:59:59'),
        ).getTime()
      } else if (conditionC.value == 'payTimeBegin') {
        // searchParams.value.payTimeBegin = timeStamp(`${startTime.value} 00:00:00`)
        // searchParams.value.payTimeCease = timeStamp(`${endTime.value} 23:59:59`)
        searchParams.value.payTimeBegin = new Date(
          moment(formState.time[0].$d).format('YYYY-MM-DD 00:00:00'),
        ).getTime()
        searchParams.value.payTimeCease = new Date(
          moment(formState.time[1].$d).format('YYYY-MM-DD 23:59:59'),
        ).getTime()
      } else if (conditionC.value == 'shipTimeBegin') {
        // searchParams.value.shipTimeBegin = timeStamp(`${startTime.value} 00:00:00`)
        // searchParams.value.shipTimeCease = timeStamp(`${endTime.value} 23:59:59`)
        searchParams.value.shipTimeBegin = new Date(
          moment(formState.time[0].$d).format('YYYY-MM-DD 00:00:00'),
        ).getTime()
        searchParams.value.shipTimeCease = new Date(
          moment(formState.time[1].$d).format('YYYY-MM-DD 23:59:59'),
        ).getTime()
      } else if (conditionC.value == 'endTimeBegin') {
        // searchParams.value.endTimeBegin = timeStamp(`${startTime.value} 00:00:00`)
        // searchParams.value.endTimeCease = timeStamp(`${endTime.value} 23:59:59`)
        searchParams.value.endTimeBegin = new Date(
          moment(formState.time[0].$d).format('YYYY-MM-DD 00:00:00'),
        ).getTime()
        searchParams.value.endTimeCease = new Date(
          moment(formState.time[1].$d).format('YYYY-MM-DD 23:59:59'),
        ).getTime()
      } // searchParams.value.startTime = timeStamp(`${startTime.value} 00:00:00`)
      // searchParams.value.endTime = timeStamp(`${endTime.value} 23:59:59`)
    }

    formState.remark != '' && (searchParams.value.remark = formState.remark)

    searchParams.value.orderStatus = formState.orderStatus

    // console.log('searchParams=', searchParams.value)

    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1

  formRef.value.resetFields()

  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize' && key != 'robotId')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }
  getList()
}

const EditRemarkSet = async (record: any) => {
  record.isRemarkShow = true
}

// 备注
const handleRemark = async (id: string, remark: string) => {
  let params = { id, remark }
  try {
    const { state, message: msg } = await xyApi.editOrderRemark(params)
    if (state === 200) {
      message.success('修改成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 刷订单
const refresh = async (id: string) => {
  loading.value = true
  try {
    const { state, message: msg } = await xyApi.refreshOrder({ id })
    if (state === 200) {
      message.success('刷新成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 取消订单
const cancelOrder = (record: any) => {
  orderDetailRef.value.show(record, 0)
}

// 改价
const editPrice = (record: any) => {
  orderDetailRef.value.show(record, 1)
}

// 发货
const sendGood = async (id: string) => {
  try {
    const { state, message: msg } = await xyApi.sendGoods({ id })
    if (state === 200) {
      message.success('发货成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 退款详情
const refundDetail = async (data: any) => {
  if (data && Object.keys(data).length > 0) {
    RefundDetailRef.value.show(data)
  } else {
    message.error('暂无详情')
  }

  // try {
  //   const { state, data, message: msg } = await xyApi.refundOrder({ id })
  //   if (state === 200) {
  //     if (data && data != '' && Object.keys(data).length > 0) {
  //       RefundDetailRef.value.show(data)
  //     } else {
  //       message.error('暂无详情')
  //     }
  //   } else {
  //     message.error(msg)
  //   }
  // } catch (error) {
  //   message.error('网络请求连接失败~')
  // }
}

// 导出表格
let exportExcelLoading = ref<boolean>(false)
let exportExcelLoadingFlag = ref<boolean>(false)

import 'dayjs/locale/zh-cn'
// 将选择范围控制在7天
const dates1 = ref<Moment[]>([])
const disabledDate1 = (current: Moment) => {
  if (!dates.value || dates.value.length === 0) {
    return false
  }
  const diffDate = current.diff(dates.value[0], 'days')
  return Math.abs(diffDate) > 30
}
const onCalendarChange1 = (val: Moment[]) => {
  dates.value = val
}
type RangeValue1 = [Dayjs, Dayjs] | [string, string] | undefined
let startTime1 = ref<string>()
let endTime1 = ref<string>()
const changeTime1 = (e: RangeValue1 | [string, string], dataString: [string, string]) => {
  console.log(dataString)
  // startTime.value = dataString[0]
  // endTime.value = dataString[1]
  startTime1.value = new Date(dataString[0] + ' 00:00:00').getTime().toString()
  endTime1.value = new Date(dataString[1] + ' 23:59:59').getTime().toString()
}

const exportExcel = async () => {
  if (!startTime1.value || !endTime1.value) {
    message.warning('请选择完整的时间范围~')

    return
  }
  searchParams.value.startTime = startTime1.value
  searchParams.value.endTime = endTime1.value

  try {
    exportExcelLoading.value = true
    exportExcelLoadingFlag.value = true

    let { state, data, message: msg } = await xyApi.fishOrderExcelOut(searchParams.value)
    // console.log('data=', data)
    let blob = new Blob([data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    let file = new File([blob], `闲鱼订单-${getNowDay()}.xlsx`, {
      lastModified: new Date() as any,
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    // console.log('file=', file)
    const a = document.createElement('a')
    a.style.display = 'none'
    document.body.appendChild(a)
    const url = URL.createObjectURL(file)
    a.href = url
    a.download = file.name
    a.click()
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  exportExcelLoading.value = false
  setTimeout(() => {
    exportExcelLoadingFlag.value = false
  }, 10000)
}

const advancedSearch = () => {
  searchDrawerRef.value.showDrawer()
}
</script>

<template>
  <!-- <page-container :title="route.meta.title"> -->
  <!-- <div style="background-color: #fff; margin-bottom: 15px; border-radius: 3px">
      <PullXyRobot @selectRobot="selectRobot"></PullXyRobot>
    </div> -->

  <!-- <a-card style="overflow-x: scroll"> -->
  <div class="searchBox">
    <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
      <a-form-item>
        <div style="background-color: #fff; position: relative; bottom: 4px">
          <PullXyRobot @selectRobot="selectRobot"></PullXyRobot>
        </div>
      </a-form-item>

      <a-form-item label="查询条件" name="optionA">
        <a-select
          v-model:value="formState.optionA"
          placeholder="请选择"
          style="width: 200px"
          @change="selectA"
          allowClear
        >
          <a-select-option v-for="(item, index) in optionAList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="查询内容" name="contentA">
        <a-input v-model:value="formState.contentA" placeholder="查询内容" style="width: 200px" />
      </a-form-item>

      <SearchDrawer ref="searchDrawerRef">
        <div>
          <a-form-item label="查询条件" name="optionA">
            <a-select
              v-model:value="formState.optionA"
              placeholder="请选择"
              style="width: 250px"
              @change="selectA"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in optionAList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="查询内容" name="contentA">
            <a-input
              v-model:value="formState.contentA"
              placeholder="查询内容"
              style="width: 250px"
            />
          </a-form-item>

          <a-form-item label="订单状态" name="orderStatus">
            <a-select
              v-model:value="formState.orderStatus"
              placeholder="请选择"
              style="width: 250px"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in orderStatusList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="订单备注" name="remark">
            <a-input v-model:value="formState.remark" placeholder="订单备注" style="width: 250px" />
          </a-form-item>

          <a-form-item label="买家条件" name="optionB">
            <a-select
              v-model:value="formState.optionB"
              placeholder="买家查询条件"
              style="width: 250px"
              @change="selectB"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in optionBList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="查询内容" name="contentB">
            <a-input
              v-model:value="formState.contentB"
              placeholder="查询内容"
              style="width: 250px"
            />
          </a-form-item>

          <a-form-item label="时间查询" name="optionC">
            <a-select
              v-model:value="formState.optionC"
              placeholder="请选择"
              style="width: 250px"
              @change="selectC"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in optionCList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="选择时间" name="time">
            <a-range-picker
              style="height: 32px; line-height: 35px; width: 250px"
              v-model:value="formState.time"
              :disabledDate="disabledDate"
              @calendarChange="onCalendarChange"
              :allowClear="false"
              :locale="locale"
              :placeholder="['开始日期', '结束日期']"
              @change="changeTime"
            />
          </a-form-item>

          <a-form-item style="text-align: right">
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button @click="reset" style="margin-left: 10px">重置</a-button>
          </a-form-item>
        </div>
      </SearchDrawer>

      <!-- <a-form-item style="margin-left: -8px">
        <div
          style="
            display: flex;
            align-items: center;
            color: #1890ff;
            justify-content: center;
            margin-left: 8px;
            cursor: pointer;
          "
          @click="() => (searchFlag = !searchFlag)"
        >
          <div style="margin-top: 2px">{{ searchFlag ? '收起' : '展开' }}</div>
          <UpOutlined
            :style="{
              transform: !searchFlag ? 'rotate(180deg)' : 'rotate(0)',
              transition: '0.5s',
              color: '#1890ff',
              fontSize: '14px',
              marginLeft: '8px',
            }"
          />
        </div>
      </a-form-item> -->
      <a-form-item label="时间导出" name="time1">
        <a-range-picker
          v-model:value="formState.time1"
          :disabledDate="disabledDate1"
          @calendarChange="onCalendarChange1"
          :locale="locale"
          :placeholder="['开始日期', '结束日期']"
          @change="changeTime1"
          style="height: 32px; line-height: 32px; width: 250px"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="search">搜索</a-button>
        <a-button @click="reset">重置</a-button>
        <a-button type="primary" @click="advancedSearch">高级搜索</a-button>
        <a-button
          :loading="exportExcelLoading"
          :disabled="exportExcelLoadingFlag"
          @click="exportExcel"
        >
          <template #icon>
            <VerticalAlignBottomOutlined />
          </template>
          导出
        </a-button>
      </a-form-item>
    </a-form>
  </div>

  <a-alert
    description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
    type="info"
    banner
    style="margin-bottom: 10px; padding: 10px"
  />

  <a-table
    style="overflow-x: scroll"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="changePage"
    rowKey="id"
    size="small"
    :scroll="{ x: 100 }"
  >
    <template #emptyText>
      <a-empty description="暂无数据" />
    </template>

    <template #headerCell="{ column }">
      <template v-if="column.key === 'id'">
        <span>id</span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'id'">
        <div style="width: 150px">{{ record.id }}</div>
      </template>

      <template v-else-if="column.key === 'productTitle'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="宝贝标题">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.productTitle }}</span>
              </template>
              <span class="hiddenText">{{ record.productTitle }}</span>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item label="宝贝图片">
            <a-popover placement="rightTop">
              <template #content>
                <div class="popoverImg">
                  <img :src="record.productPic" alt="" />
                </div>
              </template>
              <a>查看</a>
            </a-popover>
          </a-descriptions-item>
          <a-descriptions-item label="ID">{{ record.productId }}</a-descriptions-item>
          <a-descriptions-item label="店铺">
            <a-tag color="blue">{{ record.robotNickName }}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'productPrice'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="单价">
            ￥{{ toYuan(record.productPrice) }}
          </a-descriptions-item>
          <a-descriptions-item label="数量">{{ record.amount }}</a-descriptions-item>
          <a-descriptions-item label="实收金额">￥{{ toYuan(record.payment) }}</a-descriptions-item>
          <a-descriptions-item label="规格">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ productSkuCop(record.productSku) }}</span>
              </template>
              <span class="hiddenText">{{ productSkuCop(record.productSku) }}</span>
            </a-tooltip>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'orderStatus'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="id">{{ record.id }}</a-descriptions-item>
          <a-descriptions-item label="订单编号">{{ record.orderNumber }}</a-descriptions-item>
          <a-descriptions-item label="订单状态">
            <a-tag color="red" v-if="record.orderStatus == '0'">未知状态</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '1'">已创建</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '2'">已付款</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '3'">已发货</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '4'">交易成功</a-tag>
            <a-tag color="red" v-if="record.orderStatus == '5'">已退款</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '6'">交易关闭</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == '7'">退款中</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            <a-tooltip placement="top" v-if="!record.isRemarkShow">
              <template #title>
                <span>{{ record.remark }}</span>
              </template>
              <span class="hiddenText">{{ record.remark }}</span>
            </a-tooltip>
            <a-input
              v-else
              v-model:value="record.remark"
              @blur="handleRemark(record.id, record.remark)"
              style="border: 0"
            />
            <EditOutlined
              @click="EditRemarkSet(record)"
              v-if="!record.isRemarkShow"
              style="margin-left: 6px; color: #1890ff"
            />
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'fansNickName'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
          <a-descriptions-item label="买家昵称">
            <a-tooltip placement="top">
              <template #title>
                <div>
                  {{ record.fansNickName }}
                  <span v-if="record.fansName != ''">（{{ record.fansName }}）</span>
                </div>
              </template>
              <div class="hiddenText">
                {{ record.fansNickName }}
                <span v-if="record.fansName != ''">（{{ record.fansName }}）</span>
              </div>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item label="买家手机号">
            {{ record.fansPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="省市区">
            <span>{{ record.fansProv }}</span>
            <span>-{{ record.fansCity }}</span>
            <span>-{{ record.fansArea }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="详细地址">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.fansAddress }}</span>
              </template>
              <span class="hiddenText">{{ record.fansAddress }}</span>
            </a-tooltip>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'createTime'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="创建时间">
            {{ timeFormat_2(record.createTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="付款时间">
            {{ timeFormat_2(record.payTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="发货时间">
            {{ timeFormat_2(record.shipTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="完结时间">
            {{ timeFormat_2(record.endTime) }}
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'action'">
        <div style="width: 150px">
          <div>
            <a @click="refresh(record.id)">刷新</a>
          </div>

          <div>
            <a
              v-if="record.orderStatus == '1' || record.orderStatus == '2'"
              @click="cancelOrder(record)"
            >
              取消订单
            </a>
          </div>

          <div>
            <a v-if="record.orderStatus == '1'" @click="editPrice(record)">改价</a>
          </div>

          <div>
            <a v-if="record.orderStatus == '2'" @click="sendGood(record.id)">发货</a>
          </div>

          <div>
            <a
              v-if="record.orderStatus == '5' || record.orderStatus == '7'"
              @click="refundDetail(record.refundOrder)"
            >
              退款详情
            </a>
          </div>
        </div>
      </template>
    </template>
  </a-table>

  <OrderDetail ref="orderDetailRef" @refresh="getList"></OrderDetail>
  <RefundDetail ref="RefundDetailRef"></RefundDetail>
  <!-- </a-card>
  </page-container> -->
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.formClass {
  :nth-child(1) {
    // margin-bottom: 2px;
  }
}

.searchBox {
  // margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
